<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2020-05-04 16:52:10
 * @LastEditTime: 2020-07-04 10:56:42
 * @FilePath: \client\src\views\Details.vue
 * @Description: image component
 -->
<template>
  <el-card class="main-box">
    <el-row :gutter="20">
      <el-col :span="12" class="left-box">
        <el-image :src="item.url" fit="cover" :preview-src-list="[item.url]"></el-image>
      </el-col>
      <el-col :span="12">
        <!-- 用户信息 -->
        <div class="user">
          <el-avatar :size="38" :src="item.userInfo.avatarUrl"></el-avatar>
          <div>
            {{item.userInfo.name}}
            <br />
            <span>上传于：{{item.createdAt}}</span>
          </div>
        </div>
        <!-- 描述 -->
        <div class="desc">{{item.desc}}</div>
        <div class="label-box">
          <el-tag
            type="success"
            :hit="true"
            size="small"
            effect="plain"
            v-for="(l,index) in item.label"
            :key="index"
          >{{l}}</el-tag>
        </div>
        <!-- 图标 -->
        <el-divider></el-divider>
        <div class="flex">
          <el-badge :value="item.collectors.length" class="item" type="primary" :max="99">
            <i
              v-if="token && (item.collectors.findIndex(ele=>ele === userInfo.id) != -1)"
              class="el-icon-star-on"
              @click="collect(item.id)"
            ></i>
            <i v-else class="el-icon-star-off" @click="collect"></i>
          </el-badge>
          <el-badge :value="item.comments.length" class="item" type="primary">
            <i class="el-icon-chat-dot-square" @click="showComments = !showComments"></i>
          </el-badge>
          <i class="el-icon-share" @click="shareImage(item.title,item.desc,item.url)"></i>
        </div>
        <!-- 评论 -->
        <el-collapse-transition>
          <div v-if="showComments" class="comments info-color">
            <span v-for="(com,index) in item.comments" :key="index">
              <span class="primary-text">{{com.comName}}</span>
              ：
              {{com.content}}
              <br />
            </span>
            <div v-if="token">
              <el-divider></el-divider>
              <div class="comment-input">
                <el-input placeholder="写下你的评论" v-model="comment" clearable></el-input>
                <el-button type="primary" plain @click="subComment(item.id)">提交</el-button>
              </div>
            </div>
          </div>
        </el-collapse-transition>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State } from "vuex-class";
import ImageCard from "../model/ImageCard";
import request from "../http/request";
import UserInfo from "../model/UserInfo";

@Component
export default class Details extends Vue {
  @State token: string;
  @State userInfo: UserInfo;
  item: ImageCard = new ImageCard();
  showComments = false;
  comment = "";

  created() {
    const id: any = this.$route.params.id;
    if (id) {
      request
        .getImageById(id)
        .then(res => {
          if (res.data.code === 0) {
            this.item = ImageCard.create(res.data.data);
          } else {
            this.$message({
              message: "出现错误，加载失败",
              type: "error",
              showClose: true
            });
          }
        })
        .catch(err => {
          this.$message({
            message: "出现错误，加载失败",
            type: "error",
            showClose: true
          });
        });
    }
  }

  refreshItem(id: any) {
    request
      .getImageById(id)
      .then(res => {
        this.item = ImageCard.create(res.data.data);
        this.$forceUpdate();
        this.$message({
          message: "评论成功",
          type: "success",
          showClose: true
        });
      })
      .catch(err => {
        console.log(err);
        this.$message({
          message: "出现错误，评论失败",
          type: "error",
          showClose: true
        });
      });
  }

  subComment(imageId: number) {
    const param = {
      userId: this.userInfo.id,
      imageId: imageId,
      content: this.comment
    };
    request
      .postComment(param)
      .then(res => {
        const info = res.data;
        if (info && info.code === 0) {
          this.comment = "";
          this.refreshItem(this.item.id);
        } else {
          this.$message({
            message: "出现错误，评论失败",
            type: "error",
            showClose: true
          });
        }
      })
      .catch(err => {
        console.log(err);
        this.$message({
          message: "出现错误，评论失败",
          type: "error",
          showClose: true
        });
      });
  }

  collect() {
    const index = this.item.collectors.findIndex(
      ele => ele === this.userInfo.id
    );
    if (index === -1) {
      request
        .collect({
          userId: this.userInfo.id,
          imageId: this.item.id
        })
        .then(res => {
          if (res.data.code === 0) {
            this.$message({
              message: "收藏成功",
              type: "success",
              showClose: true
            });
            this.item.collectors.push(this.userInfo.id);
          } else {
            this.$message({
              message: "出现错误，收藏失败",
              type: "error",
              showClose: true
            });
          }
        })
        .catch(err => {
          this.$message({
            message: "出现错误，收藏失败",
            type: "error",
            showClose: true
          });
        });
    } else {
      request
        .cancelCollect({
          userId: this.userInfo.id,
          imageId: this.item.id
        })
        .then(res => {
          if (res.data.code === 0) {
            this.$message({
              message: "取消收藏成功",
              type: "success",
              showClose: true
            });
            this.item.collectors.splice(index, 1);
          } else {
            this.$message({
              message: "出现错误",
              type: "error",
              showClose: true
            });
          }
        })
        .catch(err => {
          this.$message({
            message: "出现错误",
            type: "error",
            showClose: true
          });
        });
    }
  }

  shareImage(title: string, summary: string, pics: string) {
    const urlPath =
      "https://connect.qq.com/widget/shareqq/index.html?url=" +
      encodeURI(window.location.href) +
      "&desc=&title=" +
      title +
      "&summary=" +
      summary +
      "&pics=" +
      pics +
      "&site=QImages";
    window.open(
      urlPath,
      "qq分享",
      "height=637, width=1053, top=195,left=459, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no"
    );
  }
}
</script>

<style lang="scss" scoped>
.main-box {
  height: 640px;
  padding-bottom: 20px;
  box-sizing: border-box;
  .left-box {
    height: 100%;
  }
  .el-image {
    overflow: hidden;
    height: 100%;
  }
}
.user {
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: center;
  margin-bottom: 20px;
  div {
    margin-left: 20px;
    & :last-child {
      color: #909399;
      font-size: 13px;
    }
  }
}
.flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
.desc {
  margin-top: 20px;
  color: #606266;
}
.comments {
  margin-top: 20px;
}
.label-box {
  padding: 10px 0 0 0;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .el-tag {
    margin-right: 5px;
    margin-bottom: 5px;
  }
}
.comment-input {
  display: flex;
  & :first-child {
    margin-right: 10px;
  }
}
.el-icon-star-on {
  color: #409eff;
}
i {
  font-size: 20px;
  cursor: pointer;
}
</style>